<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div>
      <form
        autocomplete="off"
        class="ant-form ant-form-vertical ant-pro-form"
      >
        <input
          style="display: none;"
          type="text"
        />
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <span>
                    单实例A
                  </span>
                  <input
                    class="ant-input ant-input-outlined"
                    placeholder="直接使用useControlModel"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <span>
                    单实例B
                  </span>
                  <div
                    class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
                  >
                    <div
                      class="ant-select-selector"
                    >
                      <span
                        class="ant-select-selection-wrap"
                      >
                        <span
                          class="ant-select-selection-search"
                        >
                          <input
                            aria-autocomplete="list"
                            aria-controls="rc_select_TEST_OR_SSR_list"
                            aria-expanded="false"
                            aria-haspopup="listbox"
                            aria-owns="rc_select_TEST_OR_SSR_list"
                            autocomplete="off"
                            class="ant-select-selection-search-input"
                            id="rc_select_TEST_OR_SSR"
                            readonly=""
                            role="combobox"
                            style="opacity: 0;"
                            type="search"
                            unselectable="on"
                            value=""
                          />
                        </span>
                        <span
                          class="ant-select-selection-placeholder"
                        />
                      </span>
                    </div>
                    <span
                      aria-hidden="true"
                      class="ant-select-arrow"
                      style="user-select: none;"
                      unselectable="on"
                    >
                      <span
                        aria-label="down"
                        class="anticon anticon-down ant-select-suffix"
                        role="img"
                      >
                        <svg
                          aria-hidden="true"
                          data-icon="down"
                          fill="currentColor"
                          focusable="false"
                          height="1em"
                          viewBox="64 64 896 896"
                          width="1em"
                        >
                          <path
                            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                          />
                        </svg>
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-label"
            >
              <label
                class=""
                for="customInput"
                title="多实例"
              >
                多实例
              </label>
            </div>
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div>
                    <div>
                      title: customInput-title
                    </div>
                    <label
                      class="ant-checkbox-wrapper ant-checkbox-wrapper-in-form-item"
                    >
                      <span
                        class="ant-checkbox ant-wave-target"
                      >
                        <input
                          class="ant-checkbox-input"
                          type="checkbox"
                        />
                        <span
                          class="ant-checkbox-inner"
                        />
                      </span>
                    </label>
                    <div>
                      description: customInput-desc
                    </div>
                    <input
                      class="ant-input ant-input-outlined"
                      placeholder="可以通过第二个参数达到使用多个实例的情况"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-label"
            >
              <label
                class=""
                for="FormControlFC"
                title="使用FormControlFC类型定义"
              >
                使用FormControlFC类型定义
              </label>
            </div>
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div>
                    <div>
                      FormControlFC title
                    </div>
                    <input
                      class="ant-input ant-input-outlined"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div
                    id="inputA"
                  >
                    <h3>
                      使用pickControlProps提取表单项属性
                    </h3>
                    <input
                      class="ant-input ant-input-outlined"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div>
                    <h3>
                      使用pickControlPropsWithId提取表单项属性（包括id）
                    </h3>
                    <input
                      class="ant-input ant-input-outlined"
                      id="inputB"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div>
                    <h3>
                      自定义标题：
                    </h3>
                    <div
                      class="ant-select ant-select-outlined ant-select-in-form-item ant-select-single ant-select-show-arrow"
                    >
                      <div
                        class="ant-select-selector"
                      >
                        <span
                          class="ant-select-selection-wrap"
                        >
                          <span
                            class="ant-select-selection-search"
                          >
                            <input
                              aria-autocomplete="list"
                              aria-controls="rc_select_TEST_OR_SSR_list"
                              aria-expanded="false"
                              aria-haspopup="listbox"
                              aria-owns="rc_select_TEST_OR_SSR_list"
                              autocomplete="off"
                              class="ant-select-selection-search-input"
                              id="rc_select_TEST_OR_SSR"
                              readonly=""
                              role="combobox"
                              style="opacity: 0;"
                              type="search"
                              unselectable="on"
                              value=""
                            />
                          </span>
                          <span
                            class="ant-select-selection-placeholder"
                          />
                        </span>
                      </div>
                      <span
                        aria-hidden="true"
                        class="ant-select-arrow"
                        style="user-select: none;"
                        unselectable="on"
                      >
                        <span
                          aria-label="down"
                          class="anticon anticon-down ant-select-suffix"
                          role="img"
                        >
                          <svg
                            aria-hidden="true"
                            data-icon="down"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                            />
                          </svg>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-label"
            >
              <label
                class=""
                for="selectB"
                title="FormItemRender"
              >
                FormItemRender
              </label>
            </div>
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div>
                    <input
                      class="ant-input ant-input-outlined"
                      id="selectB"
                      type="text"
                      value="xxx"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="display: flex; gap: 8px; align-items: center;"
        >
          <button
            class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
            type="button"
          >
            <span>
              重 置
            </span>
          </button>
          <button
            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
            type="button"
          >
            <span>
              提 交
            </span>
          </button>
        </div>
      </form>
    </div>
  </div>
</DocumentFragment>